<script setup>
    import { ref } from 'vue'
    // 引入我们将要创建的登录和注册表单组件
    import LoginForm from '../components/LoginForm.vue'
    import RegisterForm from '../components/RegisterForm.vue'

    // 定义一个响应式状态，用于控制显示哪个表单，默认为 true (显示登录)
    const isLoginMode = ref(true)

    // 切换到注册表单的方法
    function switchToRegister() {
        isLoginMode.value = false
    }

    // 切换到登录表单的方法
    function switchToLogin() {
        isLoginMode.value = true
    }
</script>

<template>
    <div class="auth-container">
        <h1>{{ isLoginMode ? '用户登录' : '用户注册' }}</h1>

        <!-- 根据 isLoginMode 的值，条件渲染登录或注册组件 -->
        <!-- 监听子组件触发的事件，来调用切换方法 -->
        <LoginForm v-if="isLoginMode" @go-to-register="switchToRegister" />
        <RegisterForm v-else @go-to-login="switchToLogin" />

        <!-- 另一种切换方式：在视图组件中放一个切换按钮 -->
        <!-- <div class="switch-links">
          <span v-if="isLoginMode">
            还没有账号? <button @click="switchToRegister">立即注册</button>
          </span>
          <span v-else>
            已有账号? <button @click="switchToLogin">立即登录</button>
          </span>
        </div> -->
    </div>
</template>

<style scoped>
    .auth-container {
        /* max-width: 400px; */
        max-width: 25rem; /* 400/16 */
        /* margin: 40px auto; */
        margin: 2.5rem auto; /* 40/16 */
        /* padding: 30px; */
        padding: 1.875rem; /* 30/16 */
        border: 1px solid var(--color-border);
        border-radius: 0.5rem; /* 8/16 */
        box-shadow: 0 0.125rem 0.25rem var(--color-shadow); /* 使用变量 */
        text-align: center;
        background-color: var(--color-surface); /* 使用表面颜色变量 */
    }
    .auth-container h1 {
        /* margin-bottom: 25px; */
        margin-bottom: 1.5625rem; /* 25/16 */
        color: var(--color-heading);
        font-size: 1.5rem; /* 24/16 */
        font-weight: 600; /* 加粗些 */
    }
    /* 如果有切换链接的样式 */
    .switch-links {
        margin-top: 1.25rem; /* 20/16 */
        font-size: 0.875rem; /* 14/16 */
    }
    .switch-links button {
        background: none;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        text-decoration: underline;
        padding: 0;
        font-size: 1em; /* 相对于父元素 */
    }
    .switch-links button:hover {
        color: var(--color-primary-hover);
    }
</style>